/* Enter your custom styles here */
.navigationExamples .code {
	margin: 0 5%;
	font-family: Consolas, Courier, monospace;
}

.navigationExamples .ne-flexbox1,
.navigationExamples .ne-flexbox2 {
	padding: 0;
}

.navigationExamples .ne-flexbox1 li {
	margin: 0.4em;
	padding: 0.4em 1.3em;
	list-style-type: none;
	text-align: center;
	background-color: #193441;
	cursor: pointer;
}

.navigationExamples .ne-flexbox1 li:hover {
	background-color: orange;
}

.navigationExamples .ne-flexbox2 li {
	margin: 0.5em;
	width: 25%;
	min-width: 15%;
	list-style-type: none;
	text-align: center;
	background-color: #193441;
	padding: 0.4em;
	transition: width 0.5s ease-out, background-color 0.5s ease-out, flex-basis 0.5s ease-out;
	cursor: pointer;
}

.navigationExamples .ne-flexbox2 li:hover {
	flex-basis: 35% !important;
	background-color: orange;
}

.navigationExamples .ne-flexbox1 li a,
.navigationExamples .ne-flexbox2 li a {
	color: #fff;
	text-decoration: none;
	font-size: 0.875rem;
}

.customFlexBox>.sapMFlexBoxFlexItem {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
}

.borderStyle {
	border: 1px solid black;
}

.customPanel {
	background-color: khaki !important;
	/* 替换为你想要的颜色值 */
}

.nestedFlexboxes .item1 {
	padding: 1rem;
	background-color: #d1dbbd;
}
.nestedFlexboxes .item2 {
	padding: 1rem;
	background-color: #7D8A2E;
}
.nestedFlexboxes .item3 {
	padding: 1rem;
	background-color: #C9D787;
}
.nestedFlexboxes .item4 {
	padding: 1rem;
	background-color: #FFFFFF;
}
.nestedFlexboxes .item5 {
	padding: 1rem;
	background-color: #FFC0A9;
}
.nestedFlexboxes .item6 {
	padding: 1rem;
	background-color: #FF8598;
}

.nestedFlexboxes h2 {
	color: #32363a;
}